
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="//vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet"> 
<script src="//vjs.zencdn.net/7.0/video.min.js"></script> 
<!--<link href="../video-js/css/video-js.min.css" rel="stylesheet"> -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>视频播放测试</title>
<style type="text/css">

html,body{
	margin: 0;
    padding: 0;
}

.wrap{
	width: 100%;
	height: 250px;
}

.video{
    width: 100%;
    height: 100%;
	background:#000;
}

.fullScreen{
	width:100%;
	height:100%;
}

.video .controls{
	background: #000;
}



.vjs-default-skin .vjs-control .vjs-off-button {
         display: block;
         font-size: 1.5em;
         line-height: 2;
         position: relative;
         top: 0;
         float:right;
         left: 10px;
         height: 100%;
         text-align: center;
         cursor: pointer;
}

.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    margin-top: -1.25em;
    margin-left: -1.5em;
}

.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}

.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

.vjs-control{
	border:none;
}
.vjs-full-control{
	width:30px;
	height:30px;
	line-height:30px;
}

.title {
	margin-top: 5px;
	font-family: 微软雅黑;
	font-size: 25px;
	line-height: 30px;
	font-weight: bold;
}
.xgg_date{
	font-size: 14px;
	color: #888;
}
.content{
	font-size: 18px;
	line-height: 26px;
	letter-spacing:1px;
	font-weight: bold;
}

.contain {
	margin-top: 10px;
	margin-left: 8px;
	margin-right: 8px;
	font-family: 微软雅黑;
	font-size: 16px;
	margin-bottom: 60px;
}

.tel, .address {
	width: 100%;
	line-height: 25px;
	font-size: 16px;
	font-family: 微软雅黑;
}

.contcontain {
	margin-top: 10px;
}

.image {
	margin-top: 10px;
	width: 100%;
}

.imagesize {
	margin-top: 5px;
	width: 100%;
}

.address {
	position: relative;
	width: 100%;
	height:40px;
	text-indent: 0px;
	line-height: 40px;
	margin-top: 20px;
	color: #888;
	overflow: hidden;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}


.tel {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40px;
	line-height: 40px;
	border-left: 1px solid #eee;
}

.phone {
	margin-left: 8px;
	margin-top: 8px;
	width: 24px;
	height: 24px;
	text-align: center;
}
.hidden{
	display:none;
}
</style>
</head>
<body>
    <div id="wrap" class="wrap">
    	<video
		    id="player"
		    controls="controls"
		    class="video-js video vjs-default-skin vjs-big-play-centered  "
		    controlslist="nodownload"
		    poster="http://192.168.0.104:8080/upload/icon/bg.jpg"
		    data-setup='{}'>
		   <!--  <source src="http://192.168.0.104:8080/upload/video/huibian.mp4" type="video/mp4"></source>
		  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
		  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source> -->
		</video>
    </div>
    <div class="contain" id="container">
		<div id="contain"></div>
		<div class="title" id="title" >${info.data.title}</div>
		<div class="xgg_date" id="xgg_date">时间:${date}</div>
		<div class="contcontain">
			<div class="content" id="content">${info.data.content}</div>
		</div>
		<div class="address"> 
			<span class="address_detail" id="address" >地址:${info.data.address}</span>
			<div class="tel">
				<a id="telnum" href="tel:${info.data.tel}"><img class="phone" src="../image/phone.png"></a>
			</div>
		</div>
	</div>
</body>
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
<script type="text/javascript">videojs.options.flash.swf = "static/video-js/video-js.swf";</script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/constantValue.js"></script>
<script type="text/javascript">
 var myPlayer = videojs("player",{
		"autoplay": true,
		"preload": "auto",
		"loop": false,
		"sources": [{
		    src: 'http://192.168.0.103:8080/upload/video/huibian.mp4',
		    type: 'video/mp4'
		  }]
		},function onPlayReady(){
			$(".vjs-control-bar").append('<div class="vjs-full-control" id="danmu_send_opt" onclick="fullScreen();">全屏</div>');
			var insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
			insertBeforeNode.remove();
		});

	
	var srceenWidth;
	
	function initMobileWidth(width){
		srceenWidth=width;
	}
	
	var isPortrait=true;
	
	function fullScreen(){
		if(isPortrait){
			$("#danmu_send_opt").text('退出');
			isPortrait=false;
			$("#wrap").css({
				height: srceenWidth+'px'
			});
			$("#container").addClass("hidden");
		}else{
			$("#danmu_send_opt").text('全屏');
			isPortrait=true;
			$("#wrap").css({
				height: '250px'
			});
			$("#container").removeClass("hidden");
		}
		var u = navigator.userAgent, app = navigator.appVersion;
	    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
	    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	    if (isAndroid) {
	    	var imageIndex=1;
	    	Android.fullScreen(imageIndex);
	    }
	    if (isIOS) {
	    	
	    }
 	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
    var images=['http://192.168.0.104:8080/upload/icon/bg.jpg','http://192.168.0.104:8080/upload/icon/xggidgmirdvaefkgoc1525917473139.png'];
	var serverUrl="<%=request.getAttribute("serverUrl")%>";
	
	
	
	//加载完页面即执行
	//$(function(){
	//	var imagestr="<%=request.getAttribute("photoStr")%>";
	//	images=imagestr.split(",");
	//	for(var i=0;i<images.length;i++){
	//		images[i]=serverUrl+images[i];
	//	}
	//});
	
	//判断是那种设备并执行相应的接口
	function fnCheckImage() {
		var imageIndex=one.id.split("");
	    var u = navigator.userAgent, app = navigator.appVersion;
	    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
	    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	    if (isAndroid) {
	        Android.checkImages(images,imageIndex[imageIndex.length-1]);
	    }
	    if (isIOS) {
	    	window.webkit.messageHandlers.appModel.postMessage({"photos":images,"imageIndex":imageIndex[imageIndex.length-1]});
	    }
	} 
	
</script>
</html>